<template>
  <div class="backbar">
    <el-button :icon="ArrowLeftBold" text size="large" @click="handleBack">返回首页</el-button>
  </div>
  <div class="user-info-view">
    <div class="left">
      <!-- 侧边栏 -->
      <el-col>
        <h3 class="mb-2">个人中心</h3>
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人信息</span>
            </template>
            <el-menu-item index="1-1" @click="navbarRouterFunc('UserInfoView-PersonData')">
              <el-icon>
                <Edit />
              </el-icon>个人资料
            </el-menu-item>
            <el-menu-item index="1-2" @click="navbarRouterFunc('UserInfoView-AccountSetting')">
              <el-icon>
                <Setting />
              </el-icon>账号设置
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Management />
              </el-icon>
              <span>项目信息</span>
            </template>
            <el-menu-item index="2-1" @click="navbarRouterFunc('UserInfoView-Project')">
              <el-icon>
                <Edit />
              </el-icon>我发布的
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <DataLine />
              </el-icon>
              <span>委托信息</span>
            </template>
            <el-menu-item index="3-1" @click="navbarRouterFunc('UserInfoView-Entrust-MyPosted')">
              <el-icon>
                <Edit />
              </el-icon>我发布的
            </el-menu-item>
            <el-menu-item index="3-2" @click="navbarRouterFunc('UserInfoView-Entrust-MyPickedUp')">
              <el-icon>
                <Setting />
              </el-icon>我接取的
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Comment />
              </el-icon>
              <span>交流帖信息</span>
            </template>
            <el-menu-item index="4-1" @click="navbarRouterFunc('UserInfoView-Communication')">
              <el-icon>
                <Edit />
              </el-icon>我发布的
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </div>
    <div class="right">
      <!-- 信息 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import {
  UserFilled,
  Menu as IconMenu,
  Location,
  ArrowLeftBold,
  Comment,
  Management,
  DataLine,
  Setting,
  Edit,
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 返回上一页
const handleBack = () => {
  console.log('返回首页')
  router.push({
    name: 'Index',
  });
}

// 导航栏路由
const navbarRouterFunc = (routeName: string = '') => {
  router.push({
    name: routeName,
  })
}

</script>

<style lang="less" scoped>
.backbar {
  margin-top: 20px;
  padding-left: 20px;
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, .05);

  display: flex;
  align-items: center;

  :deep(.el-button:hover) {
    color: #40aaff;
  }
}

.user-info-view {
  min-width: 1200px;
  min-height: 600px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);
  padding-top: 10px;

  display: grid;
  grid-template-columns: 250px auto;

  .left {
    // width: 20%;
    min-height: 580px;
    padding: 10px;

    :deep(.el-col) {
      h3 {
        padding: 10px 0 0 50px;
        font-size: 20px;
        border: solid 1px var(--el-menu-border-color);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
      }

      &>ul {
        height: 550px;
        overflow-y: auto;
        border: solid 1px var(--el-menu-border-color);
        border-top: none;
        border-radius: 0 0 10px 10px;
      }
    }
  }

  .right {
    min-height: 580px;
    padding: 10px;
  }
}</style>